<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片连续向左滚动</title>
<link href="css/niaochao.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
h3{
	background-color: #DDDDDD;
	float: left;
	height: 35px;
	width: 966px;
	margin-top: 2px;
	line-height: 35px;
	text-align: center;
	color: #064278;
	font-size: 18px;
	margin-left: 5px;
	margin-bottom: 10px;
}
-->
</style>

</head>

<body>
<div id="piczhanshi">
  <h3>“鸟巢”效果图</h3>
  <div id="tupian">
    <div id="demo">  
      <div id="indemo" style="float:left;width:800%;">                 
        <div id="demo1" style="float:left;">     
            <img src="images/niaochao1.jpg" alt="鸟巢" />
            <img src="images/niaochao2.jpg" alt="鸟巢" />
            <img src="images/niaochao3.jpg" alt="鸟巢" />
            <img src="images/niaochao4.jpg" alt="鸟巢" />
            <img src="images/niaochao5.jpg" alt="鸟巢" />
            <img src="images/niaochao6.jpg" alt="鸟巢" />
            <img src="images/niaochao7.jpg" alt="鸟巢" />
            <img src="images/niaochao8.jpg" alt="鸟巢" />
            <img src="images/niaochao9.jpg" alt="鸟巢" />
        </div>                   
        <div id="demo2" style="float:left;"></div>                 
      </div>                  
    </div> 
  </div>
</div>
  
<script language="javascript">
  var speed=20; //数字越大速度越慢
  var tab=document.getElementById("demo");
  var tab1=document.getElementById("demo1");
  var tab2=document.getElementById("demo2");
  tab2.innerHTML=tab1.innerHTML;
  function marquee()
  {
	if(tab2.offsetWidth-tab.scrollLeft<=0) 
	tab.scrollLeft-=tab1.offsetWidth  
	else{tab.scrollLeft++;}
  }
  var myMar=setInterval(marquee,speed);
  tab.onmouseover=function() {clearInterval(myMar)};
  tab.onmouseout=function() {myMar=setInterval(marquee,speed)};
</script>  
  
</body>
</html>
